<template>
  <div>
    <div class="details" id="cancel"  v-for="(item,idex) in dele" :key="idex">
      <img class="deim" src="" alt="" />
      <a href="./merchant.html">幸运的店 > </a>
      <span class="shipped" >{{ item.ostatus }}</span><br />
      <div class="deta_2">
        <img class="deim2" src="" alt="" />
        <div class="deta_2_1">
          <span>{{item.goodsname}}</span><span class="price">￥9.9</span>
          <br/>
          <span class="design">蓝色款(大小可调节)</span
          ><span class="pcs">x1</span>
          <br />
          <span class="sek"> 7天无理由退货 </span>
          <span class="sek"> 晚发必赔 </span>
        </div>
        <div class="deta_2_2">
          <div class="deta_2_2_2">
            <span class="deta_2_2_1_1">共1件</span>
            <span>应付 $9.9</span>
          </div>
        </div>
      </div>
      <button class="delivery2" id="dele">删除订单</button>
    </div>
  </div>
</template>

<script>
import { Order } from "@/api/Orde";
export default {
    data() {
        return {
            dele:[]
        }
    },
  mounted() {
    this.Ord();
  },
  methods: {
    Ord() {
      console.log(123);
      Order({
        phonenum: "13593008174",
      }).then((res) => {
        // if (res.result.ostatus == "失效订单") {
          this.dele = res.result;
          
        console.log(this.dele);
        //   console.log(123);
        // } else {
        //     console.log(5423);
        // }
      });
      },
    //   abc() {
    //     this.dele
    // }
  },
};
</script>

<style scoped>
.details {
  width: 350px;
  background-color: white;
  margin: 10px auto;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}

.details a {
  line-height: 0px;
  color: black;
  font-weight: 600;
}

.shipped {
  color: rgb(180, 0, 0);
  position: absolute;
  right: 15px;
  font-weight: 600;
}

.price {
  position: absolute;
  right: -70px;
}

.pcs {
  position: absolute;
  right: -70px;
  color: silver;
}

.deim {
  width: 20px;
  height: 20px;
}

.deim2 {
  width: 90px;
  height: 90px;
  margin-right: 5px;
  border-radius: 10px;
}

.deta_2 {
  margin-top: 15px;
  position: relative;
}

.deta_2_1 {
  position: absolute;
  top: 0;
  margin-left: 10px;
  display: inline-block;
}

.design {
  margin-top: 15px;
  font-size: 10px;
  color: rgb(160, 160, 160);
}

.sek {
  /* font-size: 8px !important; */
  transform: scale(0.7);
  margin-top: 8px;
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid silver;
  margin-left: -15px;
}

.deta_2_2 {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 10px;
}

.deta_2_2 img {
  width: 10px;
  height: 10px;
}

.deta_2_2_1 {
  display: flex;
  justify-content: space-between;
}

/* 最晚发货事件 */
.deta_2_2_1_1 {
  color: silver;
}

.deta_2_2_2 {
  margin-bottom: 50px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.delivery2 {
  /* width: 80px; */
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
  position: absolute;
  right: 15px;
  bottom: 10px;
}
.delivery2_0 {
  margin-top: -60px;
  position: relative;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.delivery1 {
  /* width: 80px; */
  padding: 5px 13px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  position: absolute;
  right: 140px;
  bottom: 10px;
}

.delivery2_1 {
  padding: 0px 13px;
  /* height: 30px; */
  text-align: center;
  font-size: 12px;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid rgb(211, 211, 211);
  background-color: white;
  /* position: absolute; */
  /* top: 10px; */
}
.delivery2_1:nth-child(3) {
  border: 1px solid brown;
  color: brown;
}
.delivery2_ {
  position: absolute;
  top: -5px;
  right: 0;
}
.more_0 {
  width: 90px;
  padding: 10px 0;
  text-align: center;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -80px;
  left: 10px;
  display: none;
}
.Hangout {
  box-sizing: border-box;
  width: 350px;
  height: 150px;
  margin: 10px auto;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
}

.recommend {
  text-align: center;
}

.recommend_left {
  width: 160px;
  margin-left: 25px;
  float: left;
}

.recommend_left img {
  width: 170px;
  height: 150px;
  /* border-radius:10px; */
}

.recommend_rigth {
  width: 160px;
  float: right;
  margin-right: 25px;
}

.recommend_rigth img {
  width: 170px;
  height: 150px;
  /* border-radius:10px; */
}

.recommend_1 {
  overflow: hidden;
  height: 230px;
  background-color: white;
}

.recommend_1_prcit {
  color: red;
}

.recommend_1_title {
  font-size: 12px;
}

.recommend_1_sold {
  color: silver;
}

.recommend_2 {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

/* 代付款 */
.Payment {
  display: none;
}

.order {
  /* background-color: rgba(191, 191, 191, 0.26); */
  display: none;
}
.majorStructure {
  background-color: rgba(191, 191, 191, 0.26);
}
#x3 {
  display: none;
}

/*  */
/* #b,#c,#d{
    display: none;
} */
</style>